<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>添加节点</h1>
		<div id="div01">
			<p>内容</p>
			<p>内容2</p>
		</div>
		
		<input type="text" id="input1" />
		<input type="button" onclick="add()" value="添加" />
		
		<script>
			
			function add()
			{
				// 1. 创建一个p标签节点
				var tmpP = document.createElement("p");
				// 2. 创建一个文本节点
				var txtNode = document.createTextNode(input1.value);
				// 3. 将文本放入p标签
				tmpP.appendChild(txtNode);
				// 4. 将tmpP放入div01
				div01.appendChild(tmpP);
				
			}
		</script>
		
		<h1>删除节点</h1>
		<ul id="ul01">
			<li>内容1 <a href="javascript:">删除</a></li>
			<li>内容2 <a href="javascript:">删除</a></li>
			<li>内容3 <a href="javascript:">删除</a></li>
			<li>内容4 <a href="javascript:">删除</a></li>
		</ul>
		
		<script>
			
			//找到所有的a标签
			var aArrs = document.getElementsByTagName("a");
			for(var i in aArrs)
			{
				// 给a标签
				aArrs[i].onclick = function()
				{
					//this 出发这个事件对象
					// console.log("删除");
					ul01.removeChild(this.parentElement)
				}
			}
			
			
		</script>
		
	</body>
</html>
